<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
    body {
    font-family: 'Arial', sans-serif;
    background-color: #f1f8f4;
    color: #2e7d32;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-image: url('img.png'); /* 替换为你的图片URL */
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
    }
    .header-container {
            background: linear-gradient(45deg, #388e3c, #66bb6a); /* Gradient background */
            color: white;
            text-align: center;
            padding: 20px 0;
            font-size: 24px;
            font-weight: bold;
            text-transform: uppercase;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px; /* Space between header and content */
        }
    .content {
        width: 90%;
        margin: 20px auto;
        font-family: Arial, sans-serif;
        color: #43a047;
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .header, .coBodyItem {
        display: flex;
        align-items: center;
        background-color: #f9fafc;
        border-bottom: 1px solid #e0e6ed;
        padding: 15px 0;
        border-radius: 8px;
    }
    .header {
    display: flex;
    background-color: #388e3c;
    color: #fff;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    }
    .headerItem, .item {
        text-align: center;
        word-break: break-word;
    }
    .headerItem:not(:nth-child(4)), .coBodyItem .item:not(:nth-child(4)) {
        flex: 1;
    }
    .headerItem:nth-child(4), .coBodyItem .item:nth-child(4) {
        flex: 2;
    }
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
    }
    .mask {
        background-color: rgba(0, 0, 0, 0.6);
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .modelBody {
        width: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    .formItem {
        display: flex;
        margin: 15px 0;
        align-items: center;
    }
    label {
        width: 130px;
        font-size: 14px;
        color: #555;
    }
    input {
        flex: 1;
        border: 1px solid #cfd8dc;
        border-radius: 6px;
        padding: 10px 15px;
        font-size: 14px;
        color: #333;
    }
    input:focus {
        border-color: #66bb6a;
        outline: none;
    }
    .btn {
        cursor: pointer;
        border: none;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 6px;
        transition: background-color 0.3s ease, color 0.3s ease;
        margin: 0 10px;
    }
    .btn:hover {
        opacity: 0.9;
    }
    .primary {
        background-color: #43a047;
        color: #fff;
    }
    .danger {
        background-color: #e53935;
        color: #fff;
    }
    .btnBox {
        display: flex;
        justify-content: flex-end;
    }
    .item .btn {
        margin: 5px;
        font-size: 13px;
        padding: 8px 16px;
    }
</style>

</head>
<body>
<div class="header-container">
    农产品溯源
</div>
<div class="modal">
    <div class="mask">
    </div>
    <div class="modelBody">
        <div>新增流程</div>
        <div class="formItem"><label>流程名:</label> <input id="processName" name="processName" aria-label="流程名 "  placeholder="流程名"></div>
        <div class="formItem"><label>流程内容:</label> <input id="content" name="content" aria-label="流程内容 "  placeholder="流程内容"></div>
        <div class="btnBox"><button class="btn danger" onclick="closeModal()">取消</button><button class="btn primary" onclick="handleConfirm()">提交</button></div>
    </div>
</div>
<div class="content">
    <div class="header">
        <div class="headerItem">id</div>
        <div class="headerItem">农产品名称</div>
        <div class="headerItem">农产品号码</div>
        <div class="headerItem">钱包地址</div>
        <div class="headerItem">创建时间</div>
        <div class="headerItem">操作</div>
    </div>
    <div class="coBody">
    </div>
</div>

</body>




<script>
    var params = new URLSearchParams(window.location.search);
    var id = params.get('id');
    var privateKey = params.get('privateKey');
    function downloadImg(url) {
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.blob(); // 将响应体转换为 Blob 对象
            })
            .then(blob => {
                // 创建一个临时的 URL
                const url = window.URL.createObjectURL(blob);
                // 创建一个隐藏的 <a> 元素
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = '溯源码.png'; // 设置下载的文件名
                // 将 <a> 元素添加到文档中
                document.body.appendChild(a);

                // 触发点击事件
                a.click();

                // 清理：移除 <a> 元素并释放 URL 对象
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            })
            .catch(error => {
                console.error('There has been a problem with your fetch operation:', error);
            });
    }

    let code
    function showAddModal(str) {

        $('.modal').show()
        code = str+''
    }
    function  init() {
        $.ajax({
            url: '/queryAllCodeByProductId', // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            contentType: 'application/json',
            data: JSON.stringify({
                id,
                privateKey
            }),
            success: function(data) {
                // 在这里处理从服务器返回的数据
                const { o } = data
                let  html = ''
                o.forEach(item=> {
                    const str = `
                        <div class="coBodyItem">
                        <div class="item">${item.id}</div>
                        <div class="item">${item.productName}</div>
                        <div class="item">${item.code}</div>
                        <div class="item">${item.address}</div>
                        <div class="item">${item.createTime}</div>
                        <div class="item"><button class="btn danger" onclick="showAddModal('${item.code}')">新增流程</button><button class="btn primary" onclick="downloadImg('${item.imgUrl}')">下载图片</button></div>
                    </div>`
                    html += str
                })

                $('.coBody').html(html)
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
            }
        });
    }


    let loading = false
    function handleConfirm() {
        if(loading) return
        loading = true
        const processName = $('#processName').val()
        const content = $('#content').val()
        $.ajax({
            url: '/toChain', // API 的 URL 地址
            type: 'POST', // 请求类型，可以是 GET, POST, PUT, DELETE 等
            contentType: 'application/json',
            data: JSON.stringify({
                processName,
                content,
                privateKey,
                code
            }),
            success: function(data) {
                // 在这里处理从服务器返回的数据
                const { code, msg } = data
                if(code === '1') {
                    closeModal()
                    alert('新增成功')
                } else  {
                    alert(msg)
                }
                loading = false
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error: ' + textStatus + ' ' + errorThrown);
                loading = false
            }
        });
    }

    function closeModal() {
        $('#content').val('')
        $('#processName').val('')
        $('.modal').hide()
    }

    init()

</script>

</html>